{% extends 'layout.html' %}
{% block content %}
    <h5 class="font-weight-bold">Networks</h5>
    <div class="border-top pt-3"></div>
    <!--Top Action Buttons-->
    <button type="button" class="btn btn-info btn-sm float-right m-1">Add Network</button>
    <button type="button" class="btn btn-danger btn-sm float-right m-1">Remove All</button>
    <button type="button" class="btn btn-secondary btn-sm m-1">
        Networks <span class="badge badge-light">{{ network_count }}</span>
        <span class="sr-only">unread messages</span>
    </button>
    <a href="{{ url_for('networks') }}">
        <button type="button" class="btn btn-warning btn-sm m-1"><span class="fas fa-refresh mb-1"></span> Refresh
        </button>
    </a>

    <!--Table Start-->
    <table class="table table-sm mt-4">
        <thead class="thead-light">
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Id</th>
            <th scope="col">Scope</th>
            <th scope="col">Driver</th>
            <th scope="col">IPAM Driver</th>
            <th scope="col">IPAM Subnet</th>
            <th scope="col">IPAM Gateway</th>
            <th scope="col">Action</th>
            <th scope="col">Details</th>
        </tr>
        </thead>
        <tbody>
        {% for i in docker_network %}
            <tr>
                <td>{{ i['Name'] }}</td>
                <td>{{ i['Id'][:12] }}</td>
                <td>{{ i['Scope'] }}</td>
                <td>{{ i['Driver'] }}</td>
                <td>{{ i['IPAM']['Driver'] }}</td>
                {% if i['IPAM']['Config'] | length < 1 %}
                    <td>-</td>
                {% else %}
                    <td>{{ i['IPAM']['Config'][0]['Subnet'] }}</td>
                {% endif %}
                {% if i['IPAM']['Config'] | length < 1 %}
                    <td>-</td>
                {% else %}
                    <td>{{ i['IPAM']['Config'][0]['Gateway'] }}</td>
                {% endif %}
                <td><a href="#" class="badge badge-danger">Delete</a></td>
                <td><a href="#">View</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="border-top pt-3"></div>
{% endblock content %}